<template>
  <!-- <Dialog v-model="dialogVisible" :title="dialogTitle"> -->
    <el-row >
      <el-col :span="19">
        <Form ref="formRef" v-loading="formLoading" :rules="rules" :schema="allSchemas.formSchema" :disabled="isEdit" >
          <template #bcc="form">
              <el-checkbox v-model="form['bcc']">密送</el-checkbox>
          </template>
          <template #port="form">
            <el-input disabled v-model="form['port']"></el-input>
          </template>
          <template #encryMode="form">
            <el-radio-group v-model="form['encryMode']" >
              <el-radio  value='TLS' @click="form['port']='25'">TLS加密</el-radio>
              <el-radio  value='SSL'  @click="form['port']='465'">SSL加密</el-radio>
            </el-radio-group>
          </template>
        
          </Form>
      </el-col>
      <el-col :span="1">
      </el-col>
      <el-col :span="2">
        <el-button
            type="primary"
            @click="isEdit=false"
          >
            修改
          </el-button>
      </el-col>
      <el-col :span="2">
       
        <el-switch
            v-model="formData.isValid"
            active-value="0"
            inactive-value="1"
            :disabled="isEdit"
            @change="handleStatusChange(formData)"
          />
      </el-col>
    </el-row>
   
    <div style="text-align: center;" v-if="!isEdit">
      <el-button :disabled="formLoading" type="primary"  @click="submitForm">确 定</el-button>
      <el-button  @click="isEdit=true">取 消</el-button>
    </div>
  <!-- </Dialog> -->
</template>
<script lang="ts" setup>
import * as mailboxAPI from '@/api/news/dropbox'
import { allSchemas, rules } from './configuration.data'

defineOptions({ name: 'ConfigurationForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formRef = ref() // 表单 Ref
const formData = ref({
  isValid:''
}) // 表单 数据

const isEdit = ref(true) // 弹窗的是否展示

/** 打开弹窗 */
const open = async (type: string, id?: number|string) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      const data = await mailboxAPI.getByIdmailServerConfig({id:id})
      data.bcc= data.bcc==0?false:true;
      formData.value=data;
      formRef.value.setValues(data)
    } finally {
      formLoading.value = false
    }
  }else{
    (await formRef.value.getElFormRef()).resetFields()
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
/**
 * 
 * isTest  是否是测试群(0是  1否 )
 * type   类型 (0企业微信  1钉钉)
 * isUse  是否启用(0是  1否)
 */
const emit = defineEmits(['success','setClose']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  if (!formRef) return
  const valid = await formRef.value.getElFormRef().validate()
  if (!valid) return
  // 提交请求
  formLoading.value = true
  try {
    const data = formRef.value.formModel;
    data.bcc= data.bcc==true?1:0;
    if (formType.value === 'create') {
      await mailboxAPI.savemailServerConfig(data)
      message.success(t('common.createSuccess'))
    } else {
      await mailboxAPI.savemailServerConfig(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
    setClose()
  } finally {
    formLoading.value = false
  }
}
const setClose=()=>{
  dialogVisible.value = false
  emit('setClose')
}

/** 修改状态 */
const handleStatusChange = async (row: any) => {
  if(!isEdit.value){
    await mailboxAPI.updatemailServerConfigValid({id:row.id,isValid:row.isValid})
  }
}
const getData = async ()=>{
  const {list} = await mailboxAPI.getmailServerConfigPage({pageNo:1,pageSize:10,isValid:0})
  console.log('list',list);
  await open('update', list[0].id)
}

onMounted(()=>{
  getData();
})
</script>
